<script setup lang="ts">
  import { ref, watch } from "vue"
  import Service from "../../mock/Service"
  import Photo from "./Photo.vue"
  import Introduction from "./introduction.vue"
  import Skills from "./Skills.vue"
  import Projects from "./Projects.vue"

  const props = defineProps < { id: string } > ()
  let profile = ref({} as Profile)

  watch(props, () => {
    profile.value = {} as Profile
    init()
  })

  function init(): void {
    if (props.id.length == 0) return

    Service.getProfile(props.id).then((_profile) => {
      if (_profile == undefined) return
      profile.value = _profile
      document.getElementById('splash')?.remove()
    })
  }
  init()

</script>
<template>
  <!-- TODO：简历和数据保持一致  党建 王杰   9.13 -->
  <!--TODO： 分享给他人的时候好看一点（灰色链接图片修改）王杰 张燕龙 9.15 -->
  <div v-if="profile.name">
    <!--TODO： 生活照片  做成走马灯  党建  康露露 9.15-->
    <section class="photo">
      <Photo :id="id"></Photo>
      <Introduction :data="profile"></Introduction>
    </section>

    <section class="section" v-if="profile.profession">
      <h3>专业技能</h3>
      <Skills :data="profile.profession"></Skills>
    </section>
    <section class="section" v-if="profile.projects && profile.projects.length > 0">
      <h3>项目经验</h3>
      <Projects :data="profile.projects"></Projects>
    </section>
  </div>
  <div class="loading" v-if="!profile.name">
    <section class="photo"></section>
  </div>
</template>
<style scoped>
  .section {
    padding: 24px 24px 0 24px;
  }

  section>h3 {
    color: #01a0fc;
    border-bottom: solid 1px lightgray;
    margin: 8px -24px;
    padding: 2px 24px;
  }

  .loading {
    background-color: white;
    display: block;
  }

  .loading .photo {
    background-color: lightgray;
    width: 100%;
    height: 380px;
  }
</style>